.fl {
  float: left;
}

.fr {
  float: right;
}

.flex1 {
  flex: 1;
}

.flex {
  .flex-mixin();
}

.flex-mixin () {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.f-row {
  &:extend(.flex);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.f-column {
  &:extend(.flex);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.f-wrap {
  &:extend(.flex);
  flex-wrap: wrap;
}

.f-nowrap {
  &:extend(.flex);
  flex-wrap: nowrap;
}

.f-around {
  &:extend(.flex);
  -webkit-box-pack: around;
  -webkit-justify-content: space-around;
  -ms-flex-pack: around;
  justify-content: space-around
}

.f-between {
  &:extend(.flex);
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.around-row {
  &:extend(.f-row);
  &:extend(.f-around);
}

.around-column {
  &:extend(.f-column);
  &:extend(.f-around);
}

.between-row {
  &:extend(.f-row);
  &:extend(.f-between);
}

.between-column {
  &:extend(.f-column);
  &:extend(.f-between);
}

.center-align {
  &:extend(.flex);
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.center-justify {
  &:extend(.flex);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.f-center {
  &:extend(.center-align);
  &:extend(.center-justify);
}